/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div class="page">
    <div class="fixed-bar">
      <div class="item-title">
        <router-link
          class="back"
          :to="{name:'order_statis',params:{currentPage:$route.params.currentPage}}"
          title="返回列表"
        >
          <i class="fa fa-arrow-circle-o-left"></i>
        </router-link>
        <div class="subject">
          <h3>商品订单</h3>
          <h5>商城实物商品交易订单查询及管理</h5>
        </div>
        <div class="subject" style="width:62%">
          <a href class="ncap-btn-big ncap-btn-green">
            <i class="fa fa-print"></i>打印订单
          </a>
        </div>
      </div>
    </div>
    <div class="ncap-order-style">
      <div class="titile">
        <h3></h3>
      </div>
      <div class="ncap-order-details" v-if="order">
        <div class="tabs-panels">
          <div class="misc-info">
            <h3>基本信息</h3>
            <dl>
              <dt>订单 ID：</dt>
              <dd>{{order.order_id}}</dd>
              <dt>订单号：</dt>
              <dd>{{order.order_sn}}</dd>
              <dt>会员：</dt>
              <dd>{{order.user.nickname}} ID:{{order.user_id}}</dd>
            </dl>
            <dl>
              <dt>E-Mail：</dt>
              <dd>{{order.email}}</dd>
              <dt>电话：</dt>
              <dd>{{order.mobile}}</dd>
              <dt>应付金额：</dt>
              <dd>{{order.order_amount | toFixed}}</dd>
            </dl>
            <dl>
              <dt>订单状态：</dt>
              <dd>
                {{order.order_status_detail}} / {{order.pay_status_detail}}
                <span
                  v-if="order.pay_code == 'cod'"
                  style="color: red"
                >(货到付款)</span>
                / {{order.shipping_status_detail}}
              </dd>
              <dt>下单时间：</dt>
              <dd>{{order.add_time_detail || 'N'}}</dd>
              <dt>支付时间：</dt>
              <dd>{{order.pay_time_detail || 'N'}}</dd>
            </dl>
            <dl>
              <dt>支付方式：</dt>
              <dd>{{order.pay_name}}</dd>
              <dt>发票抬头：</dt>
              <dd>{{order.invoice_title || 'N'}}</dd>
              <dt>纳税人识别号：</dt>
              <dd>{{order.taxpayer ||'N'}}</dd>
            </dl>
          </div>
          <div class="addr-note">
            <h4>收货信息</h4>
            <dl>
              <dt>收货人：</dt>
              <dd>{{order.consignee}}</dd>
              <dt>联系方式：</dt>
              <dd>{{order.mobile}}</dd>
            </dl>
            <dl>
              <dt>收货地址：</dt>
              <dd>
                <span v-for="region in order.regions">{{region.name}},</span>
                {{order.address}}
              </dd>
            </dl>
            <dl>
              <dt>邮编：</dt>
              <dd>{{order.zipcode || 'N'}}</dd>
            </dl>
            <dl>
              <dt>配送方式：</dt>
              <dd v-if="order.shop_id != 0">自提</dd>
              <dd v-else v-for="e in express">{{e.shipping_name}} -- {{e.invoice_no}}</dd>
            </dl>
          </div>
          <div v-if="order.shipping_status == 1">
            <foreach name="express" item="v">
              <div class="goods-info">
                <h4>物流信息</h4>
                <table id="express_info">
                  <thead>
                    <tr>
                      <th>操作时间</th>
                      <th>状态</th>
                    </tr>
                  </thead>
                </table>
              </div>
            </foreach>
          </div>
          <div class="contact-info">
            <h3>费用信息</h3>
            <dl>
              <dt>小计：</dt>
              <dd>{{order.goods_price | toFixed}}</dd>
              <dt>运费：</dt>
              <dd>+{{order.shipping_price | toFixed}}</dd>
              <dt>积分 (-{{order.integral}})：</dt>
              <dd>-{{order.integral_money}}</dd>
            </dl>
            <dl>
              <dt>余额抵扣：</dt>
              <dd>-{{order.user_money | toFixed}}</dd>
              <dt>优惠券抵扣：</dt>
              <dd>-{{order.coupon_price | toFixed}}</dd>
              <dt>价格调整：</dt>
              <dd>{{order.discount | toFixed}}</dd>
            </dl>
            <dl>
              <dt>订单优惠：</dt>
              <dd>-{{order.order_prom_amount | toFixed}}</dd>
              <dt>应付：</dt>
              <dd>{{order.order_amount | toFixed}}</dd>
            </dl>
          </div>
          <div class="goods-info">
            <h4>商品信息</h4>
            <table>
              <thead>
                <tr>
                  <th>商品编号</th>
                  <th colspan="2">商品</th>
                  <th>规格属性</th>
                  <th>数量</th>
                  <th>单品价格</th>
                  <th>会员折扣价</th>
                  <th>单品小计</th>
                </tr>
              </thead>
              <tr v-for="og in order.order_goods" align="center">
                <td width="80">{{og.goods_sn}}</td>
                <td width="80">
                  <div class="goods-thumb">
                    <a href target="_blank">
                      <img
                        alt
                        :src="'mall/goods_thumb_image?goods_id='+og.goods_id+'&width=200&height=200'"
                      />
                    </a>
                  </div>
                </td>
                <td class="w110">
                  <a href target="_blank">{{og.goods_name}}</a>
                  <br />
                </td>
                <td class="w120">{{og.spec_key_name}}</td>
                <td class="w60">{{og.goods_num}}</td>
                <td class="w100">{{og.goods_price | toFixed}}</td>
                <td class="w90">{{og.member_goods_price | toFixed}}</td>
                <td class="w80">{{og.goods_total | toFixed}}</td>
              </tr>
            </table>
          </div>
          <div class="total-amount contact-info">
            <h3>
              订单总额：
              <strong class="red_common">￥{{order.goods_price | toFixed}}</strong>
            </h3>
          </div>
          <div class="goods-info">
            <h4>操作记录</h4>
            <table>
              <thead>
                <tr>
                  <th>操作者</th>
                  <th>操作时间</th>
                  <th>订单状态</th>
                  <th>付款状态</th>
                  <th>发货状态</th>
                  <th>描述</th>
                  <th>备注</th>
                </tr>
              </thead>
              <tr v-for="al in actionLog" align="center">
                <td>{{al.action_user_desc}}</td>
                <td>{{al.log_time_desc}}</td>
                <td>{{al.order_status_desc}}</td>
                <td>
                  {{al.pay_status_desc}}
                  <span
                    v-if="order.pay_code == 'code'"
                    style="color: red"
                  >(货到付款)</span>
                </td>
                <td>
                  {{al.shipping_status_desc}}
                  <span
                    v-if="order.shop_id != 0 && order.pay_status == 1"
                  >{{al.shipping_status == 1 ? '已自提' : '待自提'}}</span>
                </td>
                <td>{{al.status_desc}}</td>
                <td>{{al.action_note}}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	import {
	  getDeliveryDocs
	} from "@/utils/api";
export default {
  data() {
    return {
      currentPage: this.$route.params.currentPage || 1,
      orderSn: this.$route.params.sn,
      orderId: this.$route.params.id,
      order: null,
      express: null,
      actionLog: null
    };
  },
  components: {},
  created() {
    this.getOrder();
    this.getExpress();
    this.getActionLog();
  },
  methods: {
    getOrder() {
      var that = this;
      this.request
        .get("/order", {
          params: {
            order_sn: that.orderSn
          }
        })
        .then(function(res) {
            that.order = res;
        });
    },
    getExpress() {
      var that = this;
        getDeliveryDocs({order_id: that.orderId}).then(function(res) {
            that.express = res;
        });
    },
    getActionLog() {
      var that = this;
      this.request
        .get("/order/order_action/" + that.orderId)
        .then(function(res) {
          that.actionLog = res;
        });
    }
  },
  filters: {
    toFixed(value) {
      if (typeof value == "number") {
        return value.toFixed(2);
      } else {
        return value;
      }
    }
  }
};
</script>

<style scoped>
.ncap-order-style .ncap-order-details {
  margin: 20px auto;
}
</style>
